<template>
  <div class="navfiexd">
    <ul>
      <li @click="toPatentSearch">
        <img src="../assets/patent.png" alt class="imgs" />
        <span class="spans">专利查询</span>
      </li>
      <li @click="toMatchSearch">
        <img src="../assets/matching.png" alt class="imgs" />
        <span class="spans">政策匹配</span>
      </li>
      <li @click="toEvaluation">
        <img src="../assets/ceping.png" alt class="imgs" />
        <span class="spans">企业测评</span>
      </li>
      <li>
        <img src="../assets/kefu1.png" alt class="imgs" />
        <span class="spans">客服助手</span>
        <div class="left kefu_left">
          <img src="../assets/kefuewm.png" alt />
        </div>
      </li>
      <li @click="externalConnection">
        <img src="../assets/inifo.png" alt class="imgs" />
        <span class="spans">我要吐槽</span>
      </li>
      <li>
        <img src="../assets/list.png" alt class="imgs" />
        <span class="spans">关注微信</span>
        <div class="left">
          <img :src="imgBaseUrl + codeImg" />
        </div>
      </li>
      <li @click="backToTop">
        <img src="../assets/totop.png" alt class="imgs" />
        <span class="spans">回到顶部</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { getDomainConfig, imgBaseUrl } from "../api/api.js"; // 数据请求接口
export default {
  data() {
    return {
      scrollTop: 0,
      codeImg: "",
      imgBaseUrl: imgBaseUrl
    };
  },
  mounted() {
    window.addEventListener("scroll", this.scrollToTop);
    this.getCodeImg();
  },

  methods: {
    externalConnection() {
      window.open("http://qr30.cn/C4F5p0", "_blank");
    },
    toPatentSearch() {
      const { href } = this.$router.resolve({ path: "/patentSearch" });
      window.open(href, "_blank");
    },
    toMatchSearch() {
      let token = localStorage.getItem("saasToken");
      if (!token) {
        this.$message.warning("温馨提示:亲,您尚未登录,请登录后操作！");
        return;
      }
      const { href } = this.$router.resolve({ path: "/match" });
      window.open(href, "_blank");
    },
    toEvaluation() {
      const { href } = this.$router.resolve({ path: "/evaluation" });
      window.open(href, "_blank");
    },
    backToTop() {
      let timer = setInterval(() => {
        let isspeed = Math.floor(-this.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          this.scrollTop + isspeed;
        if (this.scrollTop <= 0) {
          clearInterval(timer);
        }
      }, 20);
    },
    scrollToTop() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.scrollTop = scrollTop;
    },
    getCodeImg() {
      getDomainConfig({ configKey: "HOME_PAGE_WE_CHAT_QR_CODE" }).then(res => {
        this.codeImg = res.result.configValue;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.navfiexd {
  position: fixed;
  top: 60%;
  right: 10px;
  z-index: 999;
  // background-color: #44a2ff;
  width: 40px;
  // height: 160px;
  ul {
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    li {
      cursor: pointer;
      position: relative;
      padding: 15px;
      margin-bottom: 5px;
      background-color: #44a2ff;
      .imgs {
        width: 20px;
        height: 20px;

        // box-sizing: content-box;
      }
      .spans {
        display: none;
        font-size: 12px;
        text-align: center;
        width: 25px;
        color: #fff;
      }
      &:hover {
        .spans {
          display: block;
        }
        .imgs {
          display: none;
        }
      }
      .left {
        border-radius: 4px 0 0 4px;
        text-align: center;
        font-size: 14px;
        position: absolute;
        background-color: #fff;
        right: 60px;
        top: 50%;
        transform: translateY(-50%);
        display: none;
        transition: all 0.3;
        box-shadow: rgba(165, 164, 164, 0.2) -1px 0px 0px 2px;
        &::before {
          content: "";
          position: absolute;
          background: #fff;
          z-index: -4;
          width: 10px;
          height: 10px;
          right: -5px;
          top: 50%;
          transform: translateY(-50%) rotate(45deg);
        }
        img {
          width: 140px;
        }
      }
      &:hover .left {
        display: block;
      }
      .kefu_left {
        top: 0;
        transform: translateY(0);
        &::before {
          top: 10px;
          transform: translateY(0%) rotate(45deg);
        }
      }
    }
  }
}
</style>
